<template>
  <div class="container">
    <svg
      id="svg_demo"
      width="441"
      height="91"
      viewBox="0 0 441 91"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M56.377 0.205078L73.3691 65H65.0684L54.7656 25.4004L37.041 67.3926L19.2676 25.1074L8.86719 65H0.566406L17.5586 0.205078L37.041 46.5918L56.377 0.205078ZM105.693 2.20703V10.8008C103.219 9.14062 101.087 8.31055 99.2969 8.31055C97.7995 8.31055 96.6276 8.86393 95.7812 9.9707C94.9349 11.0775 94.5117 12.6237 94.5117 14.6094V24.7168H105.693V32.4805H94.5117V65H86.0156V32.4805H78.5938V24.7168H86.0156V15.1953C86.0156 10.6055 87.1875 6.94336 89.5312 4.20898C91.9076 1.47461 95.0651 0.107422 99.0039 0.107422C100.957 0.107422 103.187 0.807292 105.693 2.20703ZM113.115 11.4844C113.115 9.72656 113.766 8.21289 115.068 6.94336C116.37 5.64128 117.917 4.99023 119.707 4.99023C121.465 4.99023 122.979 5.64128 124.248 6.94336C125.55 8.21289 126.201 9.72656 126.201 11.4844C126.201 13.2747 125.55 14.8047 124.248 16.0742C122.979 17.3438 121.465 17.9785 119.707 17.9785C117.917 17.9785 116.37 17.3438 115.068 16.0742C113.766 14.8047 113.115 13.2747 113.115 11.4844ZM115.508 24.7168H123.906V65H115.508V24.7168ZM160.967 29.502L155.303 34.4824C153.838 33.4408 152.568 32.6595 151.494 32.1387C150.42 31.5853 149.15 31.3086 147.686 31.3086C144.235 31.3086 142.51 32.5781 142.51 35.1172C142.51 36.9401 144.691 38.7142 149.053 40.4395C153.447 42.1322 156.605 44.0039 158.525 46.0547C160.446 48.1055 161.406 50.5794 161.406 53.4766C161.406 56.862 160.023 59.8242 157.256 62.3633C154.489 64.8698 151.234 66.123 147.49 66.123C141.794 66.123 137.122 63.4863 133.477 58.2129L140.166 54.9902C142.51 57.2689 144.951 58.4082 147.49 58.4082C149.248 58.4082 150.778 57.9362 152.08 56.9922C153.415 56.0156 154.082 54.8926 154.082 53.623C154.082 51.377 151.771 49.3587 147.148 47.5684C142.526 45.778 139.32 43.9714 137.529 42.1484C135.771 40.293 134.893 38.0143 134.893 35.3125C134.893 31.9596 136.146 29.1764 138.652 26.9629C141.191 24.7168 144.365 23.5938 148.174 23.5938C151.982 23.5938 156.247 25.5632 160.967 29.502ZM168.096 1.62109H176.592V31.3086C178.936 28.6068 181.117 26.6536 183.135 25.4492C185.186 24.2122 187.676 23.5938 190.605 23.5938C194.023 23.5938 196.969 24.9121 199.443 27.5488C201.95 30.153 203.203 33.278 203.203 36.9238V65H194.707V39.3164C194.707 36.7773 194.056 34.7428 192.754 33.2129C191.484 31.6829 189.792 30.918 187.676 30.918C184.616 30.918 181.995 32.0736 179.814 34.3848C177.666 36.696 176.592 39.4954 176.592 42.7832V65H168.096V1.62109ZM254.033 46.4941H219.658C220.407 50.6283 222.1 53.6556 224.736 55.5762C227.406 57.4642 230.303 58.4082 233.428 58.4082C238.245 58.4082 242.282 56.4062 245.537 52.4023L251.738 57.0898C247.083 63.112 240.85 66.123 233.037 66.123C227.048 66.123 222.035 64.0723 217.998 59.9707C213.962 55.8691 211.943 50.7747 211.943 44.6875C211.943 38.9909 213.978 34.0592 218.047 29.8926C222.148 25.6934 227.145 23.5938 233.037 23.5938C238.831 23.5938 243.796 25.7259 247.93 29.9902C252.064 34.222 254.098 39.7233 254.033 46.4941ZM220.537 39.707H245.146C242.412 34.1732 238.376 31.4062 233.037 31.4062C227.21 31.4062 223.044 34.1732 220.537 39.707ZM273.223 24.7168V33.0176C275.111 29.6973 276.95 27.3047 278.74 25.8398C280.563 24.3424 282.923 23.5938 285.82 23.5938C286.634 23.5938 287.806 23.7891 289.336 24.1797L286.748 32.6758C285.12 32.3503 284.046 32.1875 283.525 32.1875C280.661 32.1875 278.252 33.1966 276.299 35.2148C274.378 37.2005 273.418 39.6908 273.418 42.6855V65H264.922V24.7168H273.223Z"
        stroke="#12A8C9"
        stroke-width="3"
        fill="none"
      />
    </svg>
  </div>
</template>

<script>
// import anime from "animejs";
export default {
  mounted() {
    this.anime({
      targets: "#svg_demo path",
      strokeDashoffset: [this.anime.setDashoffset, 0],
      easing: "easeInOutSine",
      duration: 5000,
      direction: "alternate",
      loop: true,
    });
  },
};
</script>

<style>
.container {
  position: relative;
  height: 100vh;
  width: 100%;
  background: #ecf0f1;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg path {
  stroke-dasharray: 800;
  stroke-dashoffset: 0;
}
</style>
